<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>talk页面</title>
    <link rel="stylesheet" href="css/Navigation.css">
    <script src="js/Navigation.js"></script>
    <script src="js/jquery-3.5.1.js"></script>

    <style>
    body{
        background-color: rgb(246, 246, 246);
    }
    *{
        margin: 0;
        padding: 0;
    }
    /* 版心 */
    #content{
        width:1200px;
        margin:0 auto;
        margin-top:70px;
        background-color:rgb(246, 246, 246); 
        /* position:relative; */
    }
    /* 侧边导航栏样式 */
    #left-nav{
        list-style: none;
        font-size: 10px;
        width:40px;
       
        background-color:#fff;
        border:1px solid rgb(236, 234, 234);
        text-align:center;
        border-radius: 8px;
        position: fixed;
        left:5%;
        top:150px;
    }
    #left-nav li{ 
        height:45px;
        line-height: 45px;
        color:rgb(182, 174, 174); 
        cursor: pointer;     
    }
    #left-nav li:hover{  
        background-color:rgb(183, 184, 172);
        color:bisque;
    }
    /* 中心模块头部样式 */
    #header{
        width:780px;
        height:200px;
        padding: 20px;
        background-color:#fff;
        border:1px solid #ccc;
        opacity: 0.9;
        box-shadow: 0 0 5px 2px rgb(220, 225, 231);
        border-radius: 2%;
        
    }
    #header p{
       color:rgb(67,184,252);
       font-size: 25px;
       position: relative;
       margin-top: -10px;
       margin-left: 20px;
    }
    #header textarea{
        width:710px;
        height:100px;
        position: absolute;
        margin-top: 20px;
        margin-left: 20px;
    }
    #header-nav{
        list-style: none;
        height:50px;
        position: absolute;
        margin-top:130px;
        margin-left: 20px;
    }
    #header-nav li{
        position: relative;
        margin-top:20px;
        float:left;
        font-size: 15px;
        letter-spacing:10px;
    }
    #header-nav li :hover{
        color:rgb(240, 176, 116);
        cursor: pointer;
    }
    #header-send{
        background-color:rgb(240, 176, 116);
        color:#fff;
        width:80px;
        height:30px;
        position: absolute;
        margin-left:650px;
        margin-top:145px;
    }
    /* 中心模块内容样式 */
    #main1{
        width:720px;
        margin-top: 3px;
        background-color: #fff;
        padding:25px 50px;
        border:1px solid #ccc;
        opacity: 0.9;
        box-shadow: 0 0 5px 2px rgb(220, 225, 231);
        }
    
   #main1-img img{
            width:50px;
            height:50px;
            border:1px solid #fff;
            border-radius: 50%;
            position: relative;
            margin-top:10px;
            margin-left:20px;
        }
    #main1-username h4{
            cursor: pointer;
            position: relative;
            margin-top:-50px;
            margin-left:80px;
    }
    #main1-username span{
            color:#666;
            font-size: 13px;
            position: relative;
            margin-left:80px;
        }
    #main1-btn input{
            cursor: pointer;
            color: rgb(67,184,252);
            background-color: #fff;
            border:1px solid rgb(67,184,252);
            width: 80px;
            height:35px;
            position: absolute;
            margin-top:-50px;
            margin-left:630px;
       }
    #main1-txt{
            position: relative;
            margin-top: 10px;
            margin-left:75px;
    }
   
   /* #main1-pic ul{
        width:700px;
        list-style: none;
        }  */
    #main1-pic .point{
        cursor: pointer;
        width: 20px;
        height: 20px;
        position: relative;
        top:4px;
        margin-top:15px;
        margin-left:70px;
    }
    .main1-ziti{
        cursor: pointer;
        color:#666;
        position: relative;
        margin-left:40px;
    }
    /* 右侧样式 -- 第一模块*/
    #right{
        width:10px;
        position: absolute;
        top:70px;  
        
    }
    #right-header{
            background-image: url(images/bjt1.jpg);
            background-repeat:no-repeat;
            width:370px;
            height:239px;
            background-color: #fff;
            /* box-shadow: #ccc 3px 3px 10px 3px; */
            position: relative;
           margin-left: 830px;
           /* border:1px solid #ccc; */
           
        }
        
    #pic{
            cursor: pointer;
            width: 60px;
            height: 60px;
            border: 1px solid #ccc;
            border-radius: 50%;
            position: absolute;
            margin-left: 30px;
            margin-top: 20px;
        }
        #change{
            display: none;
        }
        #right-header h3{
            cursor: pointer;
            position: absolute;
            margin-left: 110px;
            margin-top: 40px;
        }
         #hr1{
            width:370px;
            position: absolute;
            margin-top: 125px;
        }
        .right-first{
            list-style: none;
            position: absolute;
            margin-left: 9px;
            margin-top: 80px;
        }
        .right-first li{
            cursor: pointer;
            float: left;
            padding:30px;
            position: relative;
            margin-top: 25px;
            margin-left: 29px;
           
        }
        .right-second{
            list-style: none;
            position: absolute;
            margin-left: 30px;
            margin-top: 130px;
            letter-spacing:10px;
        }
        .right-second li{
            cursor: pointer;
            float: left;
            padding:15px;
            position: relative;
            margin-top: 30px;
            margin-left: 16px;
           
        }
        #right-two{
            width:370px;
            height:150px;
            background-color: #fff;
            /* box-shadow: #ccc 3px 3px 10px 3px; */
           position: relative;
           margin-left: 830px;
           margin-top: 10px;
           /* border:1px solid #ccc; */
        }
        #right-pic{
         list-style: none;
         position: absolute;
         margin-top: 30px;
         margin-left:60px;
        }
        #right-pic img{
            cursor: pointer;
            float: left;
            width: 40px;
            height: 40px;
            border: 1px solid #ccc;
            border-radius: 50%;
        }
        #wenzi{
        cursor: pointer;
        list-style: none;
         position: absolute;
         margin-top: 90px;
         margin-left:50px;
        }
        #wenzi li{
            float: left;
            padding:8px;
        }
        /* 第三模块 */
        #right-three{
            width:370px;
            height:80px;
            background-color: #fff;
            /* box-shadow: #ccc 3px 3px 10px 3px; */
            position: relative;
           margin-left: 830px;
           margin-top: 10px;
           /* border:1px solid #ccc; */
        }
        #right-three img{
            cursor: pointer;
            width: 50px;
            height: 50px;
            border: 1px solid #ccc;
            border-radius: 50%;
            position: absolute;
            margin-left: 20px;
            margin-top: 10px;
        }
        #right-three .p1{
            color:#666;
            position: absolute;
            margin-left: 80px;
            margin-top: 25px;
        }
        #right-three p{
            cursor: pointer;
            color:rgb(93, 63, 224);
            position: absolute;
            margin-left: 200px;
            margin-top: 25px;
        }
        #right-three .i1{
            cursor: pointer;
            float:right;
            width:0;
            height:0;
            border:5px solid transparent;
            border-top-color:rgb(49, 123, 141);
            position: absolute;
            margin-left: 260px;
            margin-top: 35px;
        }
        /* 右侧第四模块 */
        #right-four{
            width:370px;
            height:370px;
            background-color: #fff;
            /* box-shadow: #ccc 3px 3px 10px 3px; */
            position: relative;
           margin-left: 830px;
           margin-top: 10px;
           /* border:1px solid #ccc; */
            
        }
        #right-four ul{
            list-style: none;   
        }
        #right-four ul li{
            cursor: pointer;
            color:rgb(165, 163, 163);
            height:40px;
            line-height: 50px;
            position: relative;
            margin-left: 30px;
        }
        #right-four ul li:hover{
            background-color:rgb(183, 184, 172);
            color: cornflowerblue;
        }
        .collectLi{
        padding: 5px;
        width: 300px;
        height: 30px;
        color: rgb(133, 144, 166);

        }
        .collectSpan{
            padding-left: 20px;
        }
        /* 第五模块--右侧 */
        /* .ul1{
            list-style: none;
            position: absolute;  
            margin-left: 830px;
            margin-top: -290px;
        }
       
        #right-five img{
            height:20px;
            width:20px;
            padding: 8px;
            
        } */
        /* 第六模块 */
        .advice1{
            width: 370px;
            height: 370px;     
            position: relative;  
            margin-top: 20px;
            margin-left: 830px;

        }
        #tupian1{
            list-style: none;

        } 
        .images{
        width: 20px;
        height: 20px;
        float: left;
        position: relative;
        top:85px;
        left:220px;
    }
    .ziti1{
        float: left;
        position: relative;
        top:8px;
        left:215px;
    }
    #arrow{
       width: 50px; 
       height:50px;
       /* background-image: url(images/feiji.png)no-repeat; */
        background-size: cover;
        position: fixed;
        right:300px;
        bottom: 200px;
        display: none;
        z-index: 10;
        border-radius: 50%;
    }
    #up{
        width:200px;
        height:200px;
    }
    #arrow:hover{
        cursor:pointer;
    }
    </style>
    <script>
         $(function(){
            $('#pic').click(function(){
                $('#change').trigger('click')
            }),
             $(window).scroll(function () {
            //判断scrollTop
            if ($(window).scrollTop() > 900) {
                $("#arrow").fadeIn()
            } else {
                $("#arrow").fadeOut()
            }
        })
        //点击返回顶部
        $("#arrow").click(function () {
            // $(window).scrollTop(0)
            $("html,body").animate({ scrollTop: "0px" }, 300);

        })
        })

        var loopPics = ['01.jpeg', '02.png', '03.jpg']
        var index = 0
        setInterval(function () {
            var myImg = document.getElementById('loopPic')
            myImg.src = 'images/'+loopPics[index++]
            if (index > 2) {
                index = 0
            }
        }, 3000);

        //  var fileData = null
        window.onload = function() {
        //1.读取文件数据
        $.get('json/talk.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet1').innerHTML = strHTML
        })
   

        $.get('json/talk2.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet2').innerHTML = strHTML
        })
             
        $.get('json/talk2.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet3').innerHTML = strHTML
        })
             
        $.get('json/talk.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet4').innerHTML = strHTML
        })
             
        $.get('json/talk2.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet5').innerHTML = strHTML
        })
             
        $.get('json/talk.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet6').innerHTML = strHTML
        })

         $.get('json/talk.json', function(result) {
            fileData = result
            console.log(result)
                //2.循环遍历数据，组合数据，形成innerHTML字符串
            var strHTML = ''
            for (var i = 0; i < result.data.length; i++) {
                strHTML += `
                <div id="main1">
                 <div id="main1-img">
                        <img src="images/icon03.jpg">
                    </div>
                    <div id="main1-username">
                        <h4>${fileData.data[i].type}</h4>
                        <span>${fileData.data[i].title}</span>
                    </div>
                    <div id="main1-btn">
                        <input type="submit" value="关注">
                    </div>
                    <div id="main1-txt">
                        <p>${fileData.data[i].introduce}</p><br>  
                    </div>
                    <hr>
                    <div id="main1-pic">
                        <img src="images/喜欢.png" class="point">
                        <span class="main1-ziti">喜欢</span>
                        <img src="images/评论.png" class="point">
                        <span class="main1-ziti">176条评论</span>
                        <img src="images/分享.png" class="point">
                        <span class="main1-ziti">分享</span>
                        </div>
                        </div>
                                 `
                }
            document.querySelector('#cet7').innerHTML = strHTML
        })
    } 
        
    
    function action() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'inline-block'
            document.querySelector('#cet2').style.display = 'none'
            document.querySelector('#cet3').style.display = 'none'
            document.querySelector('#cet4').style.display = 'none'
            document.querySelector('#cet5').style.display = 'none'
            document.querySelector('#cet6').style.display = 'none'
            document.querySelector('#cet7').style.display = 'none'
            var ul = document.querySelector('#left-nav')
            ul.firstElementChild.classList.add("dirctor")
        }
        function push() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'none'
            document.querySelector('#cet2').style.display = 'inline-block'
            document.querySelector('#cet3').style.display = 'none'
            document.querySelector('#cet4').style.display = 'none'
            document.querySelector('#cet5').style.display = 'none'
            document.querySelector('#cet6').style.display = 'none'
            document.querySelector('#cet7').style.display = 'none'
            var ul = document.querySelector('#left-nav')
            ul.firstElementChild.nextElementSibling.classList.add("dirctor")
        }
        function hot() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'none'
            document.querySelector('#cet2').style.display = 'none'
            document.querySelector('#cet3').style.display = 'inline-block'
            document.querySelector('#cet4').style.display = 'none'
            document.querySelector('#cet5').style.display = 'none'
            document.querySelector('#cet6').style.display = 'none'
            document.querySelector('#cet7').style.display = 'none'
            var ul = document.querySelector('#left-nav')
            ul.firstElementChild.nextElementSibling.nextElementSibling.classList.add("dirctor")
        }
        function recive() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'none'
            document.querySelector('#cet2').style.display = 'none'
            document.querySelector('#cet3').style.display = 'none'
            document.querySelector('#cet4').style.display = 'inline-block'
            document.querySelector('#cet5').style.display = 'none'
            document.querySelector('#cet6').style.display = 'none'
            document.querySelector('#cet7').style.display = 'none'
            var ul = document.querySelector('#left-nav')
            ul.firstElementChild.nextElementSibling.nextElementSibling.nextElementSibling.classList.add("dirctor")
        }
        function work() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'none'
            document.querySelector('#cet2').style.display = 'none'
            document.querySelector('#cet3').style.display = 'none'
            document.querySelector('#cet4').style.display = 'none'
            document.querySelector('#cet5').style.display = 'inline-block'
            document.querySelector('#cet6').style.display = 'none'
            document.querySelector('#cet7').style.display = 'none'
            var ul = document.querySelector('#left-nav')
            ul.lastElementChild.previousElementSibling.previousElementSibling.previousElementSibling.classList.add("dirctor")
        }
        function star() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'none'
            document.querySelector('#cet2').style.display = 'none'
            document.querySelector('#cet3').style.display = 'none'
            document.querySelector('#cet4').style.display = 'none'
            document.querySelector('#cet5').style.display = 'none'
            document.querySelector('#cet6').style.display = 'inline-block'
            document.querySelector('#cet7').style.display = 'none'
            var ul = document.querySelector('#left-nav')
            ul.lastElementChild.previousElementSibling.previousElementSibling.classList.add("dirctor")
        }
        function news() {
            removeDirctor()
            document.querySelector('#cet1').style.display = 'none'
            document.querySelector('#cet2').style.display = 'none'
            document.querySelector('#cet3').style.display = 'none'
            document.querySelector('#cet4').style.display = 'none'
            document.querySelector('#cet5').style.display = 'none'
            document.querySelector('#cet6').style.display = 'none'
            document.querySelector('#cet7').style.display = 'inline-block'
            var ul = document.querySelector('#left-nav')
            ul.lastElementChild.previousElementSibling.classList.add("dirctor")
        }
        function removeDirctor() {
            var ul = document.querySelector('#left-nav')
            for (var i = 0; i < ul.children.length; i++) {
                ul.children[i].classList.remove("dirctor")
            }
        }
    
    </script>
</head>
<body>
    <!-- 通栏 -->
        <!-- 通栏 -->
        <div id="Navigation"></div>
    <!-- 版心 -->
    <div id="content">
        <!-- 侧边导航栏 -->
        <div id="left">
            <ul id="left-nav">
                <li onclick="action()"  class="dirctor">关注</li>
                <li onclick="push()">推荐</li>
                <li onclick="hot()">热门</li>
                <li onclick="recive()">收藏</li>
                <li onclick="work()">摸鱼</li>
                <li onclick="star()">娱乐</li>
                <li onclick="news()">社会</li>
                <li onclick="star()">明星</li>                
                <li onclick="news()">新闻</li>                
            </ul>
        </div>
        <!-- 中心模块 -->
        <div id="center-header">
            <!-- 中心模块头部 -->
            <div id="header">
                <p>有什么想告诉大家?</p>
                <ul id="header-nav">
                    <li><a>表情&nbsp;&nbsp;</a></li>
                    <li><a>图片&nbsp;&nbsp;</a></li>
                    <li><a>话题&nbsp;&nbsp;</a></li>
                </ul>
                <textarea>
                </textarea>
                <input type="submit" value="发布"  id="header-send">
            </div>
        </div>
            <!-- 中心模块内容 -->
            <div id="center-bottom">
               <div id="cet1"></div>
               <div id="cet2"></div>
               <div id="cet3"></div>
               <div id="cet4"></div>
               <div id="cet5"></div>
               <div id="cet6"></div>
               <div id="cet7"></div>
            </div>
            <!-- 右侧 -->
            <div id="right">
                <div id="right-header">
                   
                    <img src="images/icon03.jpg" id="pic">
                    <input type="file" name="" id="change">
                    <h3>喵姐吃瓜</h3>
                    <div id="fen">
                        <img src="images/kuang.png" id="hr1">
                    </div>
                    <ul class="right-first">
                        <li>89</li>
                        <li style="color: #ffd700;">19</li>
                        <li style="color: #f00;">1</li>
                    </ul>
                    <ul class="right-second">
                        <li>沸点</li>
                        <li>关注</li>
                        <li>关注者</li>
                    </ul>
                </div>
            <!-- 第二模块 -->
            <div id="right-two">
                <ul id="right-pic">
                    <li><img src="images/xinxi.jpg" ></li>
                    <li><img src="images/shipin.jpg" style="position: absolute;margin-left: 30px;"></li>
                    <li><img src="images/xie.jpg" style="position: absolute;margin-left: 100px;"></li>
                    <li><img src="images/xiang.jpg" style="position: absolute;margin-left: 170px;"></li>
                </ul>
                <Ul id="wenzi">
                    <li>回答问题</li>
                    <li>发视频</li>
                    <li>写文章</li>
                    <li>写说法</li>
                </Ul>
             </div>
             <!-- 第三模块 -->
             <div id="right-three">
                <img src="images/user.jpg">
                <p class="p1">创作中心</p>
                <p>去开通</p>
                <i class="i1"></i>
             </div>  
             <div id="right-four">
                <ul style="margin:0px">
                    <li class="collectLi"><svg t="1597731726736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24104" width="20" height="20"><path d="M979.2 371.2l-243.2 0c-51.2 0-102.4-32-115.2-83.2L544 57.6c-12.8-32-51.2-32-64 0L403.2 288c-19.2 51.2-64 83.2-115.2 83.2L44.8 371.2C12.8 371.2 0 416 25.6 435.2L224 576c44.8 32 64 89.6 44.8 134.4L192 947.2c-12.8 32 25.6 57.6 51.2 38.4l198.4-140.8c44.8-32 102.4-32 147.2 0l198.4 140.8c25.6 19.2 64-6.4 51.2-38.4l-76.8-230.4c-19.2-51.2 0-108.8 44.8-134.4l198.4-140.8C1024 416 1011.2 371.2 979.2 371.2zM704 460.8c-179.2 0-204.8-262.4-204.8-262.4C499.2 192 499.2 185.6 512 179.2c6.4 0 12.8 6.4 19.2 12.8 0 0 19.2 236.8 172.8 236.8 6.4 0 12.8 6.4 12.8 12.8C716.8 454.4 710.4 460.8 704 460.8z" p-id="24105"></path></svg><span class="collectSpan">我的收藏</span></li>
                    <li class="collectLi"><svg t="1597731771029" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24859" width="20" height="20"><path d="M511.35488 131.9936s238.19264-198.7584 450.56 40.96c0 0 140.17536 152.33024-10.24 378.88l-409.6 409.6s-22.20032 33.792-61.44 0l-430.08-430.08s-107.04896-188.5184 0-348.16c0 0 182.85568-267.70432 460.8-51.2z" p-id="24860"></path><path d="M132.47488 387.9936a18.72896 18.72896 0 0 0 20.48-20.48s-6.33856-164.63872 163.84-163.84c0 0 20.48-4.32128 20.48-20.48s-20.48-20.48-20.48-20.48-204.46208-8.81664-204.8 204.8c0 0 2.95936 20.48 20.48 20.48z" fill="#EBBA50" p-id="24861"></path></svg><span class="collectSpan">我关注的问题</span></li>
                    <li class="collectLi"><svg t="1597731804278" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25693" width="20" height="20"><path d="M724.89984 602.65472c12.04224 9.56928 31.30368 4.7872 40.9344-9.5744 4.8128-7.18336 4.8128-14.3616 4.8128-21.53984-2.41152-7.17824-7.22432-14.3616-12.04224-19.14368-16.85504-9.5744-33.71008-21.53984-52.97152-28.71808 24.07936-23.936 43.3408-50.25792 55.37792-81.37728 14.4384-33.50016 21.67296-69.4016 21.67296-107.69408 0-148.3776-120.3968-268.04736-269.68576-268.04736S245.71904 188.61568 245.71904 336.99328c0 71.79776 28.89728 138.81344 79.4624 189.07648-156.50816 71.79264-257.6384 227.35872-257.6384 399.67744 0 16.75264 12.03712 28.71808 28.89216 28.71808s28.89216-11.96544 28.89216-28.71808c0-160.34816 101.12512-303.94368 250.4192-358.9888 84.28032 50.24768 192.63488 47.86688 274.49856 0 26.496 9.56416 52.98688 21.53472 74.65472 35.89632z m-211.8912-57.44128c-115.57888 0-209.48992-93.34272-209.48992-208.22016 0-114.87232 93.90592-208.20992 209.48992-208.20992 115.584 0 209.48992 93.3376 209.48992 208.20992 0 28.71808-4.8128 57.4464-16.85504 83.7632-9.63072 23.936-26.49088 45.47584-45.75744 64.61952-38.51776 38.2976-91.49952 59.83744-146.87744 59.83744z m411.71968 221.95712h-95.1296v-95.13472a31.70816 31.70816 0 1 0-63.41632 0v95.13472h-95.13472a31.70816 31.70816 0 0 0 0 63.42144h95.13472v95.1296a31.71328 31.71328 0 1 0 63.41632 0v-95.1296h95.1296a31.70816 31.70816 0 1 0 0-63.42144z" fill="#333333" p-id="25694"></path></svg><span class="collectSpan">我的邀请</span></li>
                    <li class="collectLi"><svg t="1597731844553" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27921" width="20" height="20"><path d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0zM361.6 220.8c38.4-32 121.6 35.2 150.4 32 28.8 3.2 112-64 150.4-32 38.4 32-44.8 102.4-44.8 102.4h-208c-3.2 0-86.4-70.4-48-102.4zM624 361.6c0 9.6-9.6 19.2-19.2 19.2H416c-9.6 0-19.2-9.6-19.2-19.2s9.6-19.2 19.2-19.2h188.8c9.6 0 19.2 9.6 19.2 19.2z m-112 448c-144 0-262.4 12.8-262.4-108.8 0-89.6 64-233.6 156.8-300.8h208c92.8 67.2 156.8 211.2 156.8 300.8C774.4 822.4 656 809.6 512 809.6z m0 0" p-id="27922"></path><path d="M614.4 483.2c6.4-6.4 6.4-12.8 0-16-3.2-3.2-12.8-3.2-16 0L512 553.6l-86.4-86.4c-6.4-6.4-12.8-6.4-16 0-3.2 3.2-3.2 12.8 0 16l92.8 92.8v6.4H416c-6.4 0-12.8 6.4-12.8 12.8S409.6 608 416 608h83.2v48H416c-6.4 0-12.8 6.4-12.8 12.8s6.4 12.8 12.8 12.8h83.2v60.8c0 6.4 6.4 12.8 12.8 12.8s12.8-6.4 12.8-12.8v-60.8H608c6.4 0 12.8-6.4 12.8-12.8S614.4 656 608 656h-83.2v-48H608c6.4 0 12.8-6.4 12.8-12.8s-6.4-12.8-12.8-12.8h-83.2V576l89.6-92.8z m0 0" p-id="27923"></path></svg><span class="collectSpan">我的余额</span></li>
                    <li class="collectLi"><svg t="1597731875872" class="icon" viewBox="0 0 1467 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28703" width="20" height="20"><path d="M281.681038 833.589084l-83.849553 105.251831c-32.0442 40.19906 7.122813 97.232321 56.897911 82.902101l373.634693-107.806569c59.401893-17.13874 46.442095-103.509195-15.463779-102.950874l-289.768221 2.554738a53.666421 53.666421 0 0 0-41.451051 20.048773z" fill="#606060" p-id="28704"></path><path d="M1004.384333 0H463.575015C208.659514 0 0.000002 205.563373 0.000002 456.807495s208.574918 456.807495 463.575013 456.807495H1004.384333c254.93242 0 463.575013-205.580291 463.575013-456.807495S1259.249077 0 1004.384333 0z m96.572488 532.942077H753.258642c-10.67576 0-19.304346-17.037228-19.304346-38.067291s8.628586-38.067291 19.304346-38.067291H1100.821471c10.67576 0 19.304346 17.054146 19.304346 38.067291S1111.564906 532.942077 1100.821471 532.942077z m-19.38894-190.319537H386.323792a38.067291 38.067291 0 1 1 0-76.134583h695.244089a38.067291 38.067291 0 1 1 0 76.134583z" fill="#606060" p-id="28705"></path></svg><span class="collectSpan">站务中心</span></li>
                    <li class="collectLi"><svg t="1597731918152" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="30873" width="20" height="20"><path d="M246.613333 615.509333v166.826667h94.976v-153.6zM778.922667 615.509333v166.826667H683.946667v-153.6z" fill="#64EDAC" p-id="30874"></path><path d="M511.488 170.496c-168.874667 0-350.549333 116.138667-350.549333 371.2v251.733333c0 18.858667 15.274667 34.133333 34.133333 34.133334H301.056c37.632 0 68.266667-30.634667 68.266667-68.266667V700.586667c0-69.973333-56.917333-126.976-126.976-126.976h-13.141334v-32c0-209.237333 141.824-302.933333 282.282667-302.933334s282.282667 93.696 282.282667 302.933334v32h-13.141334c-69.973333 0-126.976 56.917333-126.976 126.976v58.709333c0 37.632 30.634667 68.266667 68.266667 68.266667h105.984c18.858667 0 34.133333-15.274667 34.133333-34.133334V541.781333c0-255.061333-181.76-371.285333-350.549333-371.285333z m-210.517333 588.8zM242.346667 641.962667c32.341333 0 58.709333 26.282667 58.709333 58.709333l-0.085333 58.709333h-71.765334V641.962667h13.141334z m551.424 117.333333H721.92V700.586667c0-32.341333 26.282667-58.709333 58.709333-58.709334h13.141334v117.418667zM887.381333 776.789333c-0.768 0-1.365333-0.597333-1.365333-1.365333V625.92c0-0.768 0.597333-1.365333 1.365333-1.365333h1.365334c36.266667 0 65.621333 29.354667 65.621333 65.621333v19.626667c-0.085333 36.864-30.208 66.986667-66.986667 66.986666zM137.984 776.789333c-37.546667 0-68.266667-30.72-68.266667-68.266666V692.906667c0-37.546667 30.72-68.266667 68.266667-68.266667v152.149333z" fill="#333C4F" p-id="30875"></path></svg><span class="collectSpan">帮助中心</span></li>
                    <li class="collectLi"><svg t="1597731942842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="31265" width="20" height="20"><path d="M511.965867 1011.165867C236.7488 1011.165867 12.834133 787.217067 12.834133 512S236.7488 12.834133 511.965867 12.834133C787.217067 12.834133 1011.165867 236.782933 1011.165867 512s-223.9488 499.165867-499.2 499.165867z m0-930.0992C274.397867 81.066667 81.1008 274.397867 81.1008 512s193.297067 430.933333 430.865067 430.933333c237.636267 0 430.933333-193.297067 430.933333-430.933333 0-237.602133-193.297067-430.933333-430.933333-430.933333z" fill="" p-id="31266"></path><path d="M564.0192 758.4768c-135.918933 0-246.545067-110.523733-246.545067-246.4768 0-135.918933 110.592-246.510933 246.545067-246.510933 33.314133 0 65.604267 6.519467 96.017067 19.387733l-26.658134 62.8736A178.4832 178.4832 0 0 0 385.774933 512a178.449067 178.449067 0 0 0 178.2784 178.210133c32.085333 0 63.488-8.6016 90.794667-24.8832l34.9184 58.6752a245.9648 245.9648 0 0 1-125.7472 34.474667z" fill="" p-id="31267"></path></svg><span class="collectSpan">版权服务中心</span></li>
                </ul>
             </div>
             <div class="advice1">
                <img style="width: 370px; height: 370px;" src="https://pic1.zhimg.com/v2-1e950f2d301ca6e27ca46ee86d477bc4_540x450.jpeg" id="loopPic" alt="">
            </div>
            
            </div>
            <div id="arrow">
                <img src="images/feiji.png" id="up">
            </div>
    </div>
    <script>
        $("#Navigation").load("Navigation.html");
    </script>
</body>
</html>